<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
    layout:decorator="base">

<head>
	<meta charset="UTF-8" />
	<title th:text="#{iotx.detail}">iotx详情</title>

	<link rel="stylesheet" type="text/css" href="/webResources/plugins/jquery-UI/jquery-ui-1.12.1.custom/jquery-ui.theme.css" />
	<link rel="stylesheet" type="text/css" href="/webResources/plugins/jqgrid/css/ui.jqgrid.css" />
	<link rel="stylesheet" type="text/css" href="/webResources/plugins/pageJquery/css/zxf_page.css"/>

	<style>
        .ui-jqgrid-htable{
            height: 40px;font-size: 14px;color: #80909c;font-weight: 500;
        }
        .ui-jqgrid .ui-jqgrid-htable th div {
            overflow: hidden;
            position: relative;
            height: 40px;
            padding-top: 10px;color: #798692;font-weight: 500;
        }
        .ui-jqgrid .ui-jqgrid-htable .ui-th-div {
		    height: 40px;
		    margin-top: 5px;
		    display: inine-block;
		}
        .ui-jqgrid .ui-jqgrid-resize {
            height: 40px !important;
            position: relative;
            cursor: e-resize;
            display: inline;
            overflow: hidden;
        }
        .ui-jqgrid tr.jqgrow {
            outline-style: none;
            height: 40px;
        }
        .ui-jqgrid tr.ui-row-ltr td {
            text-align: left;
            border-right-width: 0px;
            border-right-color: inherit;
            border-right-style: solid;
            color: #333333;
            font-size: 14px;
        }
        .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
            border: 0px solid #fcd3a1;
            background: #fbf8ee;
            color: #444;
        }
        .ui-widget-content {
            border: 1px solid #eee;
            background: #fff;
        }
        .ui-jqgrid tr:nth-child(even) {
            background: #F4F8F9;
        }
        .ui-jqgrid tr:nth-child(odd) {
            background: #FFFFFF;
        }
        .table-tr{
            height: 5px;
        }
        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            padding: 8px;
            line-height: 1.1;
            vertical-align: top;
            border-top: 0px solid #dddddd;
        }
        .aaa{
            text-align: left;width: 26%;
            color: #A1ACB2;
        }
        .bbb{
            padding-left: 30px;
            color: #5A7387;width: 55%;
        }
        .ccc{
            text-align: left;width: 50%;
            color: #7F7F7F;
        }
        .ddd{
            padding-left: 30px;
            color: #6DB2CF;width: 55%;
        }
    </style>

	<script type="text/javascript" src="/webResources/plugins/jqgrid/js/jquery.jqGrid.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/jqgrid/src/i18n/grid.locale-cn.js"></script>
	<script type="text/javascript" src="/webResources/plugins/pageJquery/js/zxf_page.js" ></script>
	<script type="text/javascript" src="/webResources/js/custom/page/createPage.js"></script>
	<script type="text/javascript" src="/webResources/plugins/jquery-BlockUI/jquery.blockUI.js" ></script>
	<script type="text/javascript" src="/webResources/js/custom/sensor/sensorManagementTable.js" ></script>
	<script type="text/javascript" src="/webResources/plugins/radialIndicator/radialIndicator.js" ></script>
	<script type="text/javascript" src="/webResources/js/custom/iotx/detail.js" ></script>

</head>

<body>
	<div layout:fragment="content" >
		<input type="hidden" id="iotxId" name="iotxId" th:value="${iotxId}"/>
		<div class="table-top">
		    <div class="title-big" style="width: 7%" th:text="#{iotxMgr}">
		        IOT-X节点管理
		    </div>
		    <div class="title-small">
		        >
		    </div>
			<a href="javascript:void(0)" onclick="javascript:history.go(-1);return false;" >
		    	<button class="back" th:text="#{return}"></button>
		    </a>
		</div>
		<div class="companyMgr-page" style="padding: 1.5% 2.5%">
		    <div id="detail" class="iotx-detail-top" v-cloak="v-cloak">
		        <div class="detail-top-one">
		            <img src="/webResources/img/iotx/iotx-img.png" style="width:100%;height:100%;"/>
		        </div>
		        <div class="detail-top-two">
		            <table class="table" style="margin-top: 10px">
		                <tbody>
		                <tr>
		                    <td class="aaa" th:text="#{iotx.status}">状态：</td>
		                    <td class="bbb">{{detailData.status}}</td>

		                </tr>
		                <tr>
		                    <td class="aaa" th:text="#{iotx.serialNo}">序列号：</td>
		                    <td class="bbb">{{detailData.serialNo}}</td>

		                </tr>
		                <tr>
		                    <td class="aaa" th:text="#{iotx.openTime}">开机时间：</td>
		                    <td class="bbb">{{detailData.openTime}}</td>

		                </tr>
		                <tr>
		                    <td class="aaa" th:text="#{iotx.installLocation}">安装地点：</td>
		                    <td class="bbb">{{detailData.installLocation}}</td>

		                </tr>
		                <tr>
		                    <td class="aaa" th:text="#{iotx.networkCategory}">网络类型：</td>
		                    <td class="bbb">{{detailData.networkCategory}}</td>

		                </tr>
		                <tr>
		                    <td class="aaa" th:text="#{iotx.mac}">Mac地址：</td>
		                    <td class="bbb">{{detailData.mac}}</td>

		                </tr>
		                <tr>
		                    <td class="aaa">GPS：</td>
		                    <td class="bbb">{{detailData.location}}</td>

		                </tr>
		                </tbody>
		            </table>
		        </div>
		        <div class="detail-top-three">
		            <div class="time-line-circle" id="cpuPer" ></div>
		            <div class="time-line-circle" id="memoryPer" ></div>
		            <div class="time-line-circle" id="hardDiskPer" ></div>
		            <div class="time-line-detail">
		                <div class="iotx-detail-in">
		                    <div class="iotx-detail-in-title">
		                        CPU
		                    </div>
		                    <table class="table" style="margin-top: 7%">
		                        <tbody>
		                        <tr>
		                            <td class="ccc" th:text="#{iotx.system.total}">总数：</td>
		                            <td class="ddd">{{detailData.cpu}}</td>

		                        </tr>
		                        </tbody>
		                    </table>
		                </div>
		            </div>
		            <div class="time-line-detail">
		                <div class="iotx-detail-in">
		                    <div class="iotx-detail-in-title" th:text="#{iotx.memory}">
		                       	 内存
		                    </div>
		                    <table class="table" style="margin-top: 7%">
		                        <tbody>
		                        <tr>
		                            <td class="ccc" th:text="#{iotx.system.total}">总数：</td>
		                            <td class="ddd">{{detailData.memory}}</td>
		                        </tr>
		                        <tr>
		                            <td class="ccc" th:text="#{iotx.system.used}">已用：</td>
		                            <td class="ddd">{{detailData.usedMemory}}</td>
		                        </tr>
		                        <tr>
		                            <td class="ccc" th:text="#{iotx.system.free}">可用：</td>
		                            <td class="ddd">{{detailData.freeMemory}}</td>
		                        </tr>
		                        </tbody>
		                    </table>
		                </div>
		            </div>
		            <div class="time-line-detail">
		                <div class="iotx-detail-in">
		                    <div class="iotx-detail-in-title" th:text="#{iotx.hardDisk}">
		                        	硬盘
		                    </div>
		                    <table class="table" style="margin-top: 7%">
		                        <tbody>
		                        <tr>
		                            <td class="ccc" th:text="#{iotx.system.total}">总数：</td>
		                            <td class="ddd">{{detailData.hardDisk}}</td>

		                        </tr>
		                        <tr>
		                            <td class="ccc" th:text="#{iotx.system.used}">已用：</td>
		                            <td class="ddd">{{detailData.usedHardDisk}}</td>

		                        </tr>
		                        <tr>
		                            <td class="ccc" th:text="#{iotx.system.free}">可用：</td>
		                            <td class="ddd">{{detailData.freeHardDisk}}</td>

		                        </tr>
		                        </tbody>
		                    </table>
		                </div>
		            </div>
		        </div>
		        <div class="detail-top-four">
		            <div class="detail-top-four-right" style="margin-top: 0%;background:#FF917B ">
		                <div th:text="#{iotx.alarmQuantity}" style="width: 60%;height: 45%;color: #FFFFFF;font-size: 15px;font-weight: 900;padding-top: 7%;padding-left: 10%">
		                    	告警数量
		                </div>
		                <div style="width: 60%;height: 55%;color: #FFFFFF;font-size: 20px;font-weight: 800;padding-left: 10%">
		                    {{detailData.alarmQuantity}}
		                </div>
		            </div>
		            <div class="detail-top-four-right" style="background:#85BEDD ">
		                <div th:text="#{iotx.sensorQuantity}" style="width: 60%;height: 45%;color: #FFFFFF;font-size: 15px;font-weight: 900;padding-top: 7%;padding-left: 10%">
		                    	传感器数量
		                </div>
		                <div style="width: 60%;height: 55%;color: #FFFFFF;font-size: 20px;font-weight: 800;padding-left: 10%">
		                    {{detailData.sensorQuantity}}
		                </div>
		            </div>
		            <div class="detail-top-four-right" style="background: #68D8B8">
		                <div th:text="#{iotx.continue.day}" style="width: 60%;height: 45%;color: #FFFFFF;font-size: 15px;font-weight: 900;padding-top: 7%;padding-left: 10%">
		                    	总运行时间(min)
		                </div>
		                <div style="width: 60%;height: 55%;color: #FFFFFF;font-size: 20px;font-weight: 800;padding-left: 10%">
		                    {{Math.round(detailData.continueTime/(1000*60*60*24))}}
		                </div>
		            </div>
		        </div>
		    </div>
		    <div class="iotx-detail-bottom">
		        <div id="sensorSearch" class="company-select">
		            <div class="company-search" style="float: right;margin-left:1%;margin-top: -1%;margin-right: 2%">
                        <div class="form-inline hidden-xs">
                            <div class="input-group input-medium">
                                <input class="form-control" v-model="searchContent" th:placeholder="#{searchContent}" type="text"/>
                                <span class="input-group-btn">
			                        <button id="search" class="btn btn-success" style="background: #D3D5DD;border: 0px"><i class="fa fa-search"></i></button>
			                    </span>
                            </div>
                        </div>
                    </div>
		        </div>
		        <div class="data-table" style="margin-top:1.5%">
	                <div class="col-lg-12">
	                    <table id="sensorTable"></table>
	                    <div id="sensorPager"></div>
	                </div>
		        </div>
		    </div>
		</div>
	</div>
</body>


</html>

